<template>
  <el-form class="materials" label-width="100px" size="mini">
    <el-form-item label="题目设置">
      <div class="materials-info">
        <i class="el-icon-warning el-icon--left" />
        材料题至少要有1道题目
      </div>
      <el-row v-for="(item, index) in materialsList" :key="index" class="materials-item" type="flex">
        <div class="materials-wrap">
          <el-form :model="item.form" label-width="80px" size="mini">
            <el-form-item label="题目类型">
              <el-radio-group
                v-model="item.form.type"
                :disabled="$util.getDefValue(item.questionTypeDisabled,disabledChangeType)"
                @change="topicChange($event, index)"
              >
                <el-radio v-for="(type, i) in typeData" :key="i" :label="type.value">{{ type.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题干">
              <div class="editor-simple">
                <in-editor v-model="item.form.title" placeholder="请输入题干内容" />
              </div>
            </el-form-item>
            <el-form-item v-if="$util.inArray(item.form.type, [1, 2, 3, 4])" label="选项">
              <el-row
                v-for="(optionsAnswer, i) in item.optionsData"
                :key="i"
                align="middle"
                class="edit-options"
                type="flex"
              >
                <div class="title">选项{{ optionsAnswer.key }}</div>
                <div class="content">
                  <in-editor v-model="optionsAnswer.value" placeholder="请输入选项内容" />
                </div>
                <el-radio
                  v-if="$util.inArray(item.form.type, [1, 2])"
                  v-model="item.form.answer"
                  :label="optionsAnswer.key"
                >正确
                </el-radio>
                <el-checkbox-group v-else v-model="item.form.answers">
                  <el-checkbox :label="optionsAnswer.key">正确</el-checkbox>
                </el-checkbox-group>
                <div class="delete el-icon-delete" @click="removeOptions(optionsAnswer, index, i)" />
              </el-row>
              <el-row v-if="item.form.type != 2" justify="center" type="flex">
                <el-button
                  :disabled="item.optionsDisabled"
                  icon="el-icon-plus"
                  plain
                  type="primary"
                  @click="addOptions(index)"
                >
                  新增选项({{ item.optionsData.length }}/26)
                </el-button>
              </el-row>
            </el-form-item>
            <!-- 简答题有参考答案 -->
            <el-form-item v-else-if="item.form.type == 8" label="参考答案">
              <el-row align="middle" class="edit-options" type="flex">
                <div class="content">
                  <in-editor v-model="item.form.answer" />
                </div>
              </el-row>
            </el-form-item>
            <!-- <el-form-item label="知识点">
              <el-row type="flex"><choose-point :value.sync="item.form.point" /></el-row>
            </el-form-item> -->
            <el-form-item label="难易度">
              <el-radio-group v-model="item.form.difficulty">
                <el-radio v-for="(_item, _index) in difficulty" :key="_index" :label="_item.value">{{
                  _item.title
                }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题目解析">
              <div class="editor-simple">
                <in-editor v-model="item.form.analyze" placeholder="请输入内容" />
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="materials-operate">
          <el-link
            :disabled="index == materialsList.length - 1"
            :underline="false"
            class="el-icon-bottom"
            @click="onDownItem(item, index)"
          />
          <el-link
            :disabled="index == 0"
            :underline="false"
            class="el-icon-top"
            @click="onUpItem(item, index)"
          />
          <el-link :underline="false" class="el-icon-delete" @click="deleteItem(item, index)" />
        </div>
      </el-row>
    </el-form-item>
    <el-row justify="center" type="flex">
      <el-button icon="el-icon-plus" plain size="mini" type="primary" @click="addTopic">新增题目</el-button>
      <!-- TODO:: 试题选择 -->
      <!-- <el-button type="primary" plain @click="addTopic" icon="el-icon-plus" size="mini">选择题目</el-button> -->
    </el-row>
  </el-form>
</template>

<script>
import InEditor from '@/components/ue-editor-wrap';
// import choosePoint from '@/pages/exam/question/point/choose';
export default {
  components: {
    InEditor
    // choosePoint
  },
  props: {
    value: {
      type: Array,
      default: _ => []
    },
    difficulty: {
      type: Array,
      default: _ => []
    },
    // 是否禁止切换题型
    disabledChangeType: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      optionsBasis: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      typeData: [{ name: '单选题', value: 1 }, { name: '判断题', value: 2 }, { name: '多选题', value: 3 }, {
        name: '不定项选择题',
        value: 4
      }, { name: '简答题', value: 8 }],
      materialsList: []
    };
  },
  watch: {
    materialsList: {
      handler(datas) {
        this.$emit('update:value', datas);
      },
      deep: true
    }
  },
  created() {
    const datas = this.value;
    datas.forEach(item => {
      this.materialsList.push({
        form: item.form,
        optionsData: item.options,
        optionsDisabled: item.options.length >= this.optionsBasis.length
      });
    });
  },
  methods: {
    // 添加选项
    addOptions(index) {
      // 最多添加26个选项
      const length = this.materialsList[index].optionsData.length;
      if (length > this.optionsBasis.length) {
        this.materialsList[index].optionsDisabled = true;
        return;
      }
      this.materialsList[index].optionsData.push({
        key: this.optionsBasis[this.materialsList[index].optionsData.length]
      });
      if (length + 1 == this.optionsBasis.length) {
        this.materialsList[index].optionsDisabled = true;
      }
    },
    // 删除选项
    removeOptions(item, index, indexChild) {
      if (this.materialsList[index].optionsData.length > 2) {
        this.$box
            .confirm('确认要删除该选项吗')
            .then(() => {
              var num = this.materialsList[index].optionsData.indexOf(item);
              if (num !== -1) {
                this.materialsList[index].optionsData.splice(indexChild, 1);
              }
              for (let i = 0; i < this.materialsList[index].optionsData.length; i++) {
                this.materialsList[index].optionsData[i].key = this.optionsBasis[i];
              }
            })
            .catch(() => {
            });
      }
    },
    // 知识点选项删除
    removeLearning(item, i) {
      for (const index in this.materialsList) {
        this.$box
            .confirm('确认要删除该选项吗')
            .then(() => {
              var num = this.materialsList[index].learningData.indexOf(item);
              if (num !== -1) {
                this.materialsList[index].learningData.splice(i, 1);
              }
            })
            .catch(() => {
            });
      }
    },
    // 上移
    onUpItem(item, index) {
      this.materialsList.splice(index - 1, 0, item);
      this.materialsList.splice(index + 1, 1);
    },
    // 下移
    onDownItem(item, index) {
      this.materialsList.splice(index + 2, 0, item);
      this.materialsList.splice(index, 1);
    },
    // 删除
    deleteItem(item, i) {
      if (this.materialsList.length <= 1) {
        this.$message.warning('材料题至少要有1道题目');
        return false;
      }
      this.$box
          .confirm('确认要删除该选项吗')
          .then(() => {
            var index = this.materialsList.indexOf(item);
            if (index !== -1) {
              this.materialsList.splice(i, 1);
            }
          })
          .catch(() => {
          });
    },
    // 添加题目
    addTopic() {
      this.materialsList.push({
        form: {
          type: 1,
          difficulty: 1,
          answer: '',
          answers: [],
          point: [],
          analyze: '' // 解析
        },

        optionsData: [
          {
            key: 'A',
            value: ''
          },
          {
            key: 'B',
            value: ''
          },
          {
            key: 'C',
            value: ''
          },
          {
            key: 'D',
            value: ''
          }
        ],
        optionsDisabled: false,
        questionTypeDisabled: false
      });
    },
    // 类型切换
    topicChange(type, index) {
      let num = 0;
      if (type == 2) {
        // 判断题,固定两个答案: 正确和错误
        num = 2;
      } else if (this.$util.inArray(type, [1, 3, 4])) {
        // 选择,至少有2个答案,通常为4个答案
        num = 4;
      }

      this.$set(this.materialsList[index], 'optionsData', []);
      this.$set(this.materialsList[index].form, 'answer', '');
      this.$set(this.materialsList[index].form, 'answers', []);
      this.$nextTick(() => {
        const optionsData = this.getOptionsData(num, type);
        this.$set(this.materialsList[index], 'optionsData', optionsData);
      });
    },
    // 获取选项
    getOptionsData(num, type) {
      let optionsData = [];
      if (type == 2) {
        optionsData = [
          {
            key: this.optionsBasis[0],
            value: '正确'
          },
          {
            key: this.optionsBasis[1],
            value: '错误'
          }
        ];
      } else {
        for (let i = 0; i < num; i++) {
          optionsData.push({
            key: this.optionsBasis[i],
            value: ''
          });
        }
      }

      return optionsData;
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-form {
  .editor-simple {
    flex: 1;
    //border: 1px solid #d5d8de;
  }

  .edit-options {
    .content {
      flex: 1;
      margin: 0 10px;
      color: #909399;
      //border: 1px solid #d5d8de;
      margin-bottom: 20px;
    }

    .el-checkbox:last-of-type {
      margin-right: 30px;
    }

    .delete {
      color: #606266;
      font-size: 20px;
      cursor: pointer;
    }
  }

  .edit-learning {
    border: 1px solid #dcdfe6;
    color: #606266;
    font-weight: 500;
    font-size: 12px;
    border-radius: 3px;
    margin-right: 10px;

    .text,
    .close {
      padding: 0 8px;
      line-height: 26px;
      height: 26px;
    }

    .close {
      cursor: pointer;
      border-left: 1px solid #dcdfe6;
    }
  }
}

.materials {
  margin-bottom: 20px;

  .materials-info {
    font-size: 12px;
    font-weight: 400;
    color: #909399;
    margin-bottom: 18px;

    i {
      color: #606266;
    }
  }

  .materials-item {
    margin-bottom: 15px;

    .materials-wrap {
      flex: 1;
      //border: 1px solid #d5d8de;
      padding: 20px;
      margin-right: 10px;
    }

    .materials-operate {
      .el-link {
        font-size: 20px;
      }
    }
  }
}
</style>
